/*
 * @Author: longjs
 * @Date: 2021-11-07 13:57:02
 * @LastEditTime: 2022-12-07 16:35:58
 * @LastEditors: chengsl
 * @Descripttion: 表格布局
 * 注意: 搜索框的盒子需要设置ref=header
 * 页码容器需要设置ref=page-bar
 * 页面父盒子需要设置ref=wrap
 */
export default {
  methods: {
    /**
     * 对表格重新布局，解决特殊情况下表格错位的问题
     */
    layoutTable() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.doLayout() // 重新布局解决表格错位
          this.$scrollBackTop() // 滚动条回到顶部
        }
      })
    },

    /**
     * 监听窗口变化，动态设置表格高度
     * @param {*} fatherDomRefName table 父节点 dom 的 ref 的名字
     * @param {*} marginHeigth 多余的要减去的高度
     */
    resizeTableHeight(fatherDomRefName, marginHeigth) {
      this.setTableHeight()
      const elementResizeDetectorMaker = require('element-resize-detector') // 监听元素长宽变化的插件
      const listener = elementResizeDetectorMaker()
      listener.listenTo(this.$refs[fatherDomRefName || 'wrap'], () => {
        this.setTableHeight(fatherDomRefName, marginHeigth || 10)
      })
    },

    /**
     * 计算表格自适应高度
     */
    setTableHeight(fatherDomRefName, marginHeigth) {
      this.$nextTick(() => {
        const wrap = this.$refs[fatherDomRefName || 'wrap']
        if (!wrap) return
        const pageBar = this.$refs['page-bar']
        const header = this.$refs['header']

        const wrapHeight = wrap.offsetHeight // 容器总高度
        const headerHeight = header ? header.offsetHeight : 0 // 头部高度
        const pageBarHeight = pageBar ? pageBar.offsetHeight : 0 // 分页组件高度
        this.tableHeight = wrapHeight - headerHeight - pageBarHeight - marginHeigth || 10 // 计算表格高度
        this.layoutTable()
      })
    }
  }
}
